<template>
  <div class="index">
    <div class="contextal">
      <div class="index-first">
        <div class="first">
          <div class="btitle">ANBIO BIOTECHNOLOGY</div>
          <div class="first-balance">
            <div class="balance-title">Balance</div>
            <!--         <div class="balance-tag">ACTION REQUIRED</div>-->
            <div class="balance-price">${{ Balance }}&nbsp;USD</div>
            <!--          <div class="balance-text">
            Amount due to PayPal
            <img src="../../assets/common/hint.png" alt="" />
          </div>-->
          </div>

          <div class="first-text">Amounts</div>

          <div class="first-list" v-for="(item, index) in 2" :key="index">
            <div class="list-title">
              {{ index == 0 ? "Money in" : "Money out" }}
            </div>
            <div class="list-price">
              {{ index == 0 ? "$"+Money_in +"&nbsp;USD": "$"+Money_out+"&nbsp;USD" }}
            </div>
            <div class="list-text">
              {{ index == 0 ? "Total received" : "Total sent or spent" }}
            </div>
          </div>
        </div>
      </div>
      <div class="two">
        <img src="https://oss-cdn.anbio.com/uploads/f292c8cb04c03e3f08b2edc1a5de7e44.jpg" />
      </div>
    </div>

    <!--    <div class="index-second" v-else>
      <div class="second-left">
        <div class="left-title">Hi, ANBIO. Glad you've joined us.</div>
        <div class="left-text">
          <p>
            We know you may be new to PayPal, so we lined up some things you'll
            need to do to get your account ready for business.
          </p>

          <p>
            If you have questions along the way, visit our
            <span style="color: #0060df; font-weight: bold">Help Center</span>.
          </p>
        </div>
      </div>
      <div class="second-right" :style="{'max-height': activeNames.length == 0? '97px': '' }">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="" name="1">
            <div slot="title" style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
                <div class="right-text">Activate your account to use PayPal</div>
                <div class="right-text" style="color: rgba(0, 0, 0, 0.4); margin-right: 10px;">2/3 completed</div>
            </div>

            <div class="right-list">
              <div class="list-img"></div>
              <div class="list-title">Profile verified</div>
            </div>

            <div class="right-list">
              <div class="list-img"></div>
              <div class="list-title">Email Confirmed</div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="Link a bank account" name="2">
            <div class="right-title">
              Connect the bank account you use for your business.
            </div>

            <div class="right-button">Choose Your Bank</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>-->
  </div>
</template>

<script>
import {loadBalanceInfo} from "@/api";

export default {
  data() {
    return {
      indexShow: true,
      //----------
      Balance: 0,
      Money_in: 0,
      Money_out: 0,
      activeNames: ["1", "2"],
    };
  },


  mounted() {
    this.LoadBalanceInfo();
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    formatNumber(number) {
      return number.toFixed(2);
    },
    LoadBalanceInfo()
    {
      debugger
      loadBalanceInfo().then((res) => {
        if (res.success == true) {
          this.Balance = this.formatNumber(res.result.money);
          this.Money_in = this.formatNumber(res.result.fundMoney);
          this.Money_out = this.formatNumber(res.result.fmoney);

        }
      });
    }
  },
};
</script>

<style lang="less" scoped>
.index {
  padding-top: 40px;
  box-sizing: border-box;
  min-height: calc(100vh - 50px);
  background: #f5f7fa;
  .contextal {
    display: flex;
    justify-content: center;

    .index-first {
      height: 100%;
      display: flex;
      align-items: center;
      // justify-content: center;
      margin-left: 100px;
      .first {
        .btitle {
          margin-left: -100px;
          margin-bottom: 10px;
          font-size: 18px;
          color: #0070ba;
        }

        .first-balance {
          background: #fff;
          border-radius: 4px;
          width: 300px;
          height: 160px;
          padding: 20px;
          box-sizing: border-box;
          text-align: left;

          .balance-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
          }
          .balance-tag {
            padding: 4px;
            box-sizing: border-box;
            border-radius: 5px;
            background: red;
            color: #fff;
            width: 110px;
            font-size: 10px;
            margin-bottom: 10px;
          }
          .balance-price {
            font-size: 26px;
            color: #0070ba;
            margin-bottom: 10px;
          }
          .balance-text {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.4);
            font-weight: 600;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;

            img {
              width: 20px;
              height: 20px;
              margin-left: 5px;
            }
          }
        }

        .first-text {
          text-align: left;
          margin-top: 20px;
          font-size: 18px;
          font-weight: 500;
          margin-bottom: 10px;
        }

        .first-list {
          background: #fff;
          border-radius: 4px;
          width: 300px;
          height: 160px;
          padding: 20px;
          box-sizing: border-box;
          text-align: left;
          margin-bottom: 20px;

          .list-title {
            font-size: 16px;
            font-weight: bold;
          }

          .list-price {
            font-size: 24px;
            margin-top: 30px;
            margin-bottom: 10px;
          }

          .list-text {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.4);
            font-weight: 600;
            letter-spacing: 0.5px;
          }
        }

        .first-list:last-child {
          margin-bottom: 0;
        }
      }
    }

    .two {
      height: 580px;
      margin-left: 300px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .index-second {
      display: flex;
      padding: 0 60px;
      box-sizing: border-box;

      .second-left {
        width: 40%;
        text-align: left;
        margin-right: 20px;
        .left-title {
          font-size: 32px;
          font-weight: 500;
          color: #000;
          margin-bottom: 10px;
        }
        .left-text {
          p {
            color: #000;
            line-height: 25px;
            font-size: 18px;
          }
        }
      }
      .second-right {
        width: 60%;
        border-radius: 5px;
        padding-left: 5px;
        background: #0060df;

        /deep/ .el-collapse-item__header {
          padding-left: 20px;
          box-sizing: border-box;
        }

        /deep/ .el-collapse-item__header {
          font-weight: bold;
          font-size: 14px;
          border-bottom: 1px solid #ebeef5;
        }

        .right-list {
          display: flex;
          align-items: center;
          padding: 20px;
          box-sizing: border-box;

          .list-img {
            width: 20px;
            height: 20px;
            border: 1px solid;
            margin-right: 10px;
          }

          .list-title {
            font-size: 14px;
            font-weight: bold;
          }
        }

        .right-title {
          text-align: left;
          padding-left: 40px;
          box-sizing: border-box;
          font-size: 14px;
          font-weight: bold;
          margin-top: 10px;
          color: rgba(0, 0, 0, 0.4);
        }

        .right-button {
          color: #fff;
          text-align: center;
          background: #0060df;
          width: 150px;
          height: 30px;
          line-height: 30px;
          margin-left: 40px;
          border-radius: 30px;
          font-size: 12px;
          font-weight: bold;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
